<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1" class="d1" abc="123" data-abc="234"></div>
<form action="#">
    <input type="text" name="tt" readonly disabled value="123">
    <button>提交</button>
</form>
<select>
    <option>1</option>
    <option>2</option>
    <option selected>3</option>
</select>

<script>
    let div1 = document.querySelector("#div1");
    console.log(div1.getAttribute("abc"));
    console.log(div1.getAttribute("data-abc"));
    console.log(div1.getAttribute("abcd"));
    console.log(div1.getAttributeNames());
    console.log(div1.hasAttribute("data-abcd"));
    console.log(div1.removeAttribute("abc"))
    console.log(div1.getAttributeNames());
    div1.setAttribute("data-abc", "haha");
    // 属性添加
    div1.setAttribute("a123", "2222");
    // 适合添加没有属性值的属性
    div1.toggleAttribute("a123");

    let input = document.querySelector("input");
    console.log(input.value);
    input.value = "haha";

    console.log(input.readOnly);

//    请在昨天的书本表格中的tr加上属性及值，如data-index="书本id"

    // 属性操作其它方式
    div1.haha = "哈哈"; // div1本质上也是一个Object，此种方式不正规，不会影响到DOM
    console.log(div1.haha);
    console.log(div1.getAttribute("haha"))

</script>
</body>
</html>